
<template>
  <!-- 组件是一个图片组件
   1. 事件：点击事件
   2. 属性：src / width / height / round
  -->
  <div class="img-container" :class="round? 'img-round': ''"

  @click="handleImageClick" :style="{width, height}">
    <img v-lazy="src" alt="">
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: 'auto'
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleImageClick() {
      this.$emit('handleImageClick')
      // $emit 逻辑不在子组件，调用父组件的逻辑
    }
  },
}
</script>
<style lang="scss" scoped>
.img-container {
  img{
    width: 100%;
    height: 100%;
  }
}
.img-round {
  border-radius: 50%;
  img {
    border-radius: 50%;
  }
}
</style>